<template>
<div class="align-container">
<h1 :style="{textAlign:'center'}">图书管理系统</h1>
</div>
<div class="right-align">
<router-link to="/User" class="wen">用户管理</router-link>
<router-link to="/Book" class="wen">图书管理</router-link>
<router-link to="/Borr" class="wen">借阅管理</router-link>
<router-link to="/Reminders" class="wen">催还提醒</router-link>
<router-link to="/System" class="wen">系统管理</router-link>
</div>

<div :style="{textAlign:'center'}">
  <router-view></router-view>
</div>

</template>
<script setup>
import { ElMessageBox } from 'element-plus'
const dialogVisible=()=>{
  ElMessageBox('This is a Message')
}
</script>
<style scoped>
.right-align {
  list-style: none;
  display: flex;
  gap: 30px;
  padding: 0;
  justify-content: center;
}
.wen{
  text-decoration: none;
  color: #333;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s;
}
</style>
